// ** React Imports
import { useState } from "react";

// ** MUI Imports
import CssBaseline from "@mui/material/CssBaseline";
import GlobalStyles from "@mui/material/GlobalStyles";
import {
  createTheme,
  responsiveFontSizes,
  ThemeProvider,
} from "@mui/material/styles";
import { bgBG as coreBgBG } from "@mui/material/locale";
import { bgBG } from "@mui/x-data-grid/locales";

// ** Direction component for LTR or RTL
import CustomDirection from "../../layouts/components/CustomDirection.tsx";

// ** Theme
import themeOptions from "./ThemeOptions";

// ** Global Styles
import GlobalStyling from "./globalStyles";

// @ts-ignore
const ThemeComponent = ({ settings, children }) => {
  const [locale] = useState("zhCN");

  // ** Create a base theme using `createTheme`
  let theme = createTheme({
    // You can define your base theme settings here
    // Example: palette: { type: 'light' },
    ...themeOptions(settings, "light"), // Assuming `themeOptions` returns theme modifications based on settings
  });

  // ** Apply locale and additional configurations
  // @ts-ignore
  theme = createTheme(theme, locale, bgBG, coreBgBG); // Adjust as necessary

  // ** Apply responsive font sizes if configured
  if (settings.responsiveFontSizes) {
    theme = responsiveFontSizes(theme);
  }

  // ** Render the theme provider with the created theme
  return (
    <ThemeProvider theme={theme}>
      <CustomDirection direction={settings.direction}>
        <CssBaseline />
        <GlobalStyles styles={() => GlobalStyling(theme)} />
        {children}
      </CustomDirection>
    </ThemeProvider>
  );
};

export default ThemeComponent;
